<script src="js/md5.min.js"></script>
<div class="container_16">
    <div class="grid_12 push_1 containerHeight">
        <fieldset style="border-color: red;">
            <legend><h2><?=lang("cambiarContra");?></h2></legend>
            <form id="cambioContraseña" action="backend/personal/configuracion/cambiarContrasena" method="post">
                <table>
                    <tr>
                        <td><?=lang("contraActual");?></td>
                        <td><input id="vieja" name="actual" type="password"/></td>
                        <td>
                            <span id="controlVieja" style="display: none"><?=lang("contraIncorrecta");?></span>
                            <span id="okey" style="display: none"><b><?=lang("contraGuardada")?></b></span>
                        </td>
                    </tr>
                    <tr>
                        <td><?=lang("contraNueva");?></td>
                        <td><input id="nueva1" name="contrasena" type="password"/></td>
                        <td>
                            <span id="controlNueva" style="display: none;"><?=lang("contraNoCoincide");?></span>
                            <span id="blanco" style="display:none;"><?=lang("indicarNuevaContra");?></span>
                        </td>
                    </tr>
                    <tr>
                        <td><?=lang("repita");?></td>
                        <td><input id="nueva2" type="password"/></td>
                    </tr>
                </table>
                <button id="actualizarContraseña" type="button"><?=lang("cambiarContra");?></button>
            </form>
        </fieldset>
        <fieldset style="border-color: red;">
            <legend><h2><?=lang("cambioIdioma");?></h2></legend>
            <form id="cambioIdioma" action="backend/personal/configuracion/cambioIdioma" method="post">
                <table>
                    <tr>
                        <td style="width: 120px; text-align: center;">
                            <a class="" href='backend/principal/principal/cambioIdioma?lang=es'>
                                <img style="" width="32" src="/images/cabecera/espanol.png"/>
                                <br><span style="text-align: center">Español</span>
                            </a>
                        </td>
                        <td style="width: 120px; text-align: center;">
                            <a class="" href='backend/principal/principal/cambioIdioma?lang=ca'>
                                <img style="" width="32" src="/images/cabecera/catala.png"/>
                                <br><span style="text-align: center">Català</span>
                            </a>
                        </td>
                        <td style="width: 120px; text-align: center;">
                            <a class="" href='backend/principal/principal/cambioIdioma?lang=en'>
                                <img style="" width="32" src="/images/cabecera/english.png"/>
                                <br><span style="text-align: center">English</span>
                            </a>
                        </td>
                    </tr>
                </table>
            </form>
        </fieldset>
        <fieldset style="border-color: red;">
            <legend><h2><?=lang("pagPreferida");?></h2></legend>
            <form id="frmPagina" action="backend/principal/principal/configuracionPaginaPreferida" method="post">
                <?=lang("indicaPagPreferida");?>
                <br>
            <select id="pagina" name="pagina">
                <option value="0" selected="selected"><?=lang("selecciona");?>...</option>
                <option value="/backend/cuenta/cuenta"><?=lang("misCuentas");?></option>
                <option value="/backend/deposito/deposito"><?=lang("dep");?></option>
                <option value="/backend/hipoteca/hipoteca"><?=lang("calcHip");?></option>
                <option value="/backend/inversiones/inversiones"><?=lang("inversiones");?></option>
                <option value="/backend/notificacion/notificacion"><?=lang("notificaciones");?></option>
                <option value="/backend/personal/configuracion"><?=lang("configuracion");?></option>
                <option value="/backend/personal/datosPersonales"><?=lang("datosPersonales");?></option>
                <option value="/backend/prestamo/prestamo"><?=lang("prestms");?></option>
                <option value="/backend/solicitud/solicitud"><?=lang("misSolicitudes");?></option>
                <option value="/backend/tarjeta/tarjeta"><?=lang("tarj");?></option>
                <option value="/backend/transferencia/hacerTransferencia"><?=lang("trans");?></option>
            </select>

            <p>
                <button type="button" id="btnPagina"><?=lang("cambiar");?></button>
            </p>
            <br>
            <span style="font-size: 10px"><?=lang("notaPagPrincipal");?></span>
            </form>
        </fieldset>
        <fieldset style="border-color: red;">
            <legend><h2><?=lang("borrarUsuario");?></h2></legend>
            <?=lang("notaBorrarUsuario");?>:
            <br>
            <button type="button" id="eliminar"><?=lang("btnBaja");?></button>
        </fieldset>
    </div>
</div>

<div id="oculto" style="display: none;">
    <center><?=lang("confirmacionBaja");?></center>
</div>

<script>
    $("#actualizarContraseña").click(function () {
        if (md5($("#vieja").val()) == "<?=$contra?>") {
            if ($("#nueva1").val() == $("#nueva2").val()) {
                if ($("#nueva1").val() == "") {
                    $("#blanco").attr("style", "color:red");
                    $("#controlNueva").attr("style", "display:none");
                } else {
                    /*$("#cambioContraseña").submit();*/
                    $.ajax({
                        type: 'POST',
                        url:  "backend/personal/configuracion/cambiarContrasena" ,
                        data:  $("#cambioContraseña").serialize(),
                        success: function () {
                            $("#okey").attr("style", "color: green;");
                            $("#okey").attr("style", "color: green;").delay(3000).fadeOut('slow');
                            $("#vieja").val("");
                            $("#nueva1").val("");
                            $("#nueva2").val("");
                        },
                        error: function (data) {
                            alert(data);
                        }
                    });
                }
            } else {
                $("#controlNueva").attr("style", "color:red").delay(3000).fadeOut('slow');
                $("#blanco").attr("style", "display:none");
            }
            $("#controlVieja").attr("style", "display:none");
        } else {
            $("#controlVieja").attr("style", "color:red").delay(3000).fadeOut('slow');
        }
    });

    $("#btnPagina").click(function () {
        $("#frmPagina").submit();
    });

    $("#eliminar").click(function() {
        $('#oculto').dialog({modal:true,
            height:150,
            width:250,
            resizable:false,
            buttons:[
                {
                    text:"Cancelar",
                    click:function () {
                        $(this).dialog("close");
                    }
                },
                {
                    text:"Aceptar",
                    click:function () {
                        $(this).dialog("close");
                        window.location = "backend/personal/configuracion/bajaUsuario";
                    }
                }
            ]
        });
    });
</script>